<template>
  <div class="evaluate-statistics">
    <div class="evaluate-statistics__left">
      <div class="card">
        <EvaluateRingChart
          v-if="statistics && !loading"
          :ring-chart-data="ringChartData"
          :data="statistics"
        />

        <div
          v-if="loading"
          v-loading="loading"
          style="width: 100%; height: 220px;"
        />
      </div>

      <div class="card">
        <template v-if="!loading">
          <div
            style="margin-bottom: 10px; line-height: 30px;"
          >
            本月已提交评价：{{ evaluateUsernames.complete || '-' }}
          </div>

          <div
            style="line-height: 30px;"
          >
            本月未提交评价：{{ evaluateUsernames.notCompleted || '-' }}
          </div>
        </template>

        <div
          v-else
          v-loading="loading"
          style="width: 100%;height: 100px"
        />
      </div>

      <div class="card">
        <EvaluateBarChart
          v-if="statistics && !loading"
          ref="barChart"
          :data="barData"
          :x-axis-data="barChartXAxisData"
        />

        <div
          v-if="loading"
          v-loading="loading"
          style="width: 100%; height: 220px;"
        />
      </div>
    </div>
    <div class="evaluate-statistics__right">
      <div class="card search">
        <el-form inline>
          <el-form-item label="评价年月：">
            <el-date-picker
              v-model="params.time"
              type="month"
              placeholder="请选择"
              value-format="yyyy-MM"
              :clearable="false"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="handleSearch"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="card">
        <el-button
          type="primary"
          size="mini"
          style="margin-bottom: 20px;"
          @click="handleExportData"
        >
          导出本月评价数据
        </el-button>

        <el-table
          v-loading="loading"
          :data="sumUserFormat"
          border
          stripe
        >
          <el-table-column prop="user.username" label="姓名" align="center" />
          <el-table-column prop="user.gender" label="性别" align="center">
            <template v-slot="{ row }">
              <span v-if="row.user.gender === 1">男</span>
              <span v-else-if="row.user.gender === 0">女</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="good_reviews" label="好评数" align="center" />
          <el-table-column sortable prop="bad_reviews" label="差评数" align="center" />
        </el-table>

        <Pagination
          :total="sumUsers?.length"
          :limit.sync="page.limit"
          :page.sync="page.page"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getEvaluateStatistics, exportEvaluateData } from '@/api/evaluate'
import EvaluateRingChart from '@/views/evaluate/components/EvaluateRingChart.vue'
import EvaluateBarChart from '@/views/evaluate/components/EvaluateBarChart.vue'
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination/index.vue'
import { sleep } from '@/utils'

export default {
  name: '',
  components: {
    Pagination,
    EvaluateRingChart,
    EvaluateBarChart
  },
  data() {
    return {
      statistics: null,
      params: {
        time: null
      },
      page: {
        limit: 10,
        page: 1
      },
      loading: false
    }
  },

  computed: {
    ringChartData() {
      return [
        { label: '好评', value: this.statistics?.good, color: '#67C23A' },
        { label: '差评', value: this.statistics?.difference, color: '#F56C6C' }
      ]
    },

    barData() {
      const sum = this.statistics?.sum
      const bad = sum?.map(item => item.bad_reviews)
      const good = sum?.map(item => item.good_reviews)
      return { good, bad }
    },

    barChartXAxisData() {
      const sum = this.statistics?.sum
      return sum?.map(item => item?.user?.username) ?? []
    },

    sumUsers() {
      return this.statistics?.sum
    },

    sumUserFormat() {
      const limit = this.page.limit
      const page = this.page.page
      const start = (page - 1) * limit
      const end = start + limit
      return this.sumUsers?.slice(start, end)
    },

    evaluateUsernames() {
      const complete = this.statistics?.complete?.map(item => item.user.username).join('，')
      const notCompleted = this.statistics?.notCompleted?.map(item => item.user.username).join('，')
      console.log('this.statistics?.notCompleted --------->', this.statistics?.notCompleted)
      return {
        complete,
        notCompleted
      }
    }
  },

  created() {
    this.params.time = this.timeInit()
    this.getEvaluateStatistics(this.params)
  },

  methods: {
    async getEvaluateStatistics(params) {
      this.loading = true
      try {
        const res = await getEvaluateStatistics(params)
        this.statistics = res.data
        console.log('res --------->', res)
      } catch (error) {
        this.$message.error('信息获取失败')
      } finally {
        await sleep(500)
        this.loading = false
      }
    },

    timeInit() {
      const time = dayjs()
      const currentDay = time.date()

      if (currentDay >= 25) {
        return time.format('YYYY-MM')
      } else {
        return time.subtract(1, 'month').format('YYYY-MM')
      }
    },

    handleSearch() {
      this.page.page = 1
      const t = this.params.time
      const time = t ? JSON.stringify([t, t]) : null
      const query = {
        ...this.params,
        time
      }
      this.getEvaluateStatistics(query)
    },

    handleExportData() {
      const t = this.params.time

      if (!t) return this.$message.error('请先选择评价年月')

      if (this.sumUsers.length <= 0) return this.$message.error('暂无数据可导出')

      const time = t ? JSON.stringify([t, t]) : null

      this.exportEvaluateData({ time })
    },

    async exportEvaluateData(params) {
      try {
        const res = await exportEvaluateData(params)
        window.open(res.path, '_blank')
        this.$message.success('导出成功')
      } catch (error) {
        this.$message.error('导出失败')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.evaluate-statistics {
  padding: 20px;
  display: flex;

  .card {
    margin-bottom: 20px;
  }

  &__left {
    width: 30%;
  }

  &__right {
    margin-left: 20px;
    width: 70%;
    .search {
      ::v-deep(.el-form-item) {
        margin-bottom: 0;
        margin-right: 20px;
        .el-form-item__label {
          font-weight: 400;
        }
      }
    }
  }
}
</style>
